<template>
  <el-dialog
    :title="lang.t('page.account.printer.title')"
    v-model="show"
    :width="600"
    destroy-on-close
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
      <el-form-item :label="lang.t('page.account.printer.path')" prop="path">
        <el-input v-model="form.path">
          <template #append>
            <el-button @click="onOpenPath"><i class="iconfont min icon-search-max"></i></el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="lang.t('page.account.printer.small')" prop="small">
            <el-select v-model="form.small" placeholder=" " style="width: 100%">
              <el-option
                v-for="(item, index) in printers"
                :key="index"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="lang.t('page.account.printer.a4')" prop="a4">
            <el-select v-model="form.a4" placeholder=" " style="width: 100%">
              <el-option :label="lang.t('page.account.printer.show')" value="show" />
              <el-option
                v-for="(item, index) in printers"
                :key="index"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onUpdate">{{ lang.t('common.ok') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref } from 'vue'
import app from '@/app'

import printerModel from '@/model/printer'

export default {
  setup() {
    // 对话框
    const show = ref(false)

    // 打印机
    const printers = app.window.getPrinters()

    // 表单
    const form = ref({})
    const formRef = ref()
    const rules = {
      small: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      a4: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      path: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
    }

    // 打开
    const open = () => {
      // 加载
      printerModel.get()
      form.value = Object.assign({}, printerModel.getData())
      show.value = true
    }

    // 更新
    const onUpdate = () => {
      formRef.value.validate(valid => {
        if (valid) {
          printerModel.update(form.value)
          app.ui.message('success', 'ok') 
          show.value = false
        }
      })
    }

    // 选择目录
    const onOpenPath = () => {
      const path = app.window.dialogOpen({
        properties: ['openDirectory']
      })
      
      if(path) {
        form.value.path = path[0]
      }
    }

    return {
      lang: app.lang,
      show,
      open,
      printers,
      form,
      formRef,
      rules,
      onUpdate,
      onOpenPath
    }
  }
}
</script>